<template>
	<view class="repayment-details" v-if="details">
<!-- 		<view class="u-font-30 u-text-center u-margin-top-60">还款金额</view>
		<view class="account">
			<text class="u-font-36">¥</text>
			<text>{{details.principal | thousands}}</text>
		</view> -->

		<view class="repayment-body u-margin-top-30">
			<view class="repayment-title">
				<image src="@/static/img/pic_car.png"></image>
				<view>
					<text v-for="(item,index) in ['brand', 'series', 'model']" :key="index">
						{{details[item]}}
					</text>
				</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="repayment-content">
				<view class="u-flex u-row-between u-margin-bottom-24">
					<view>授信银行</view>
					<view>{{details.bankName}}</view>
				</view>
				<view class="u-flex u-row-between u-margin-bottom-24">
					<view>授信利率</view>
					<view>{{details.interestRate}}%</view>
				</view>
				<view class="u-flex u-row-between u-margin-bottom-10">
					<view>贷款金额</view>
					<view style="color: #F76260;">￥{{details.principal | thousands}}</view>
				</view>
				<view class="u-margin-bottom-24 formula-1">贷款金额=利息÷时间÷利率</view>
				<view class="u-flex u-row-between u-margin-bottom-8">
					<view>利息</view>
					<view style="color: #F76260;">￥{{details.interest | thousands}}</view>
				</view>
				<view class="u-margin-bottom-24 formula-1">利息=授信利率÷365*贷款金额*贷款天数</view>
				<view class="formula-2">贷款天数=还款时间-放款时间</view>
				<u-line color="#F2F2F2" />
				<view class="u-flex u-row-between u-margin-bottom-24 u-margin-top-30">
					<view>放款日期</view>
					<view>{{details.timeLoan | dateYMDHMSFormat}}</view>
				</view>
				<view class="u-flex u-row-between u-margin-bottom-24">
					<view>还款日期</view>
					<view>{{details.timeRepayment | dateYMDHMSFormat}}</view>
				</view>
				<view class="u-flex u-row-between u-margin-bottom-24">
					<view>销售申请单号</view>
					<view>{{details.innerId}}</view>
				</view>
				<view class="u-flex u-row-between">
					<view>还款凭证</view>
					<view class="u-flex" @click="openFile(details.payProofUrl)">
						<image class="file-icon" src="@/static/img/icon_view@2x.png"></image>
						<text class="u-margin-left-10">查看</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {openFile} from '@/utils/index.js'
	export default {
		data() {
			return {
				details: null
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('repaymentItem', (item) => {
				console.log(item);
				this.details = item
			})
		},
		methods:{
			openFile
		}
	}
</script>

<style scoped lang="less">
	.repayment-details {
		color: #202020;

		.account {
			font-weight: bold;
			font-size: 32px;
			margin-top: 10px;
			margin-bottom: 30px;
			text-align: center;
		}

		.repayment-body {
			background: #FFFFFF;
			border-radius: 8px;
			margin: 0 15px;
			box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
			color: #202020;
			font-size: 14px;

			.repayment-title {
				display: flex;
				align-items: center;
				font-weight: 500;

				padding: 13px 15px;

				image {
					width: 16px;
					height: 16px;
					margin-right: 10px;
				}
			}

			.repayment-content {
				padding: 15px;

				.formula-1 {
					color: #CECECE;
					font-size: 12px;
				}

				.formula-1::before {
					content: '*';
					color: #F86920;
				}

				.formula-2 {
					background: #F7F7F7;
					padding: 12px 15px;
					color: #666666;
					font-size: 12px;
					margin-bottom: 15px;
				}
				.file-icon {
					width: 16px;
					height: 16px;
				}
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>